<template>
  <el-card class="user-container">
    <template #header>
      <div class="header">
        <span :style="{color: primaryColor, fontWeight:'bold'}">介绍</span>
      </div>
    </template>
    <!-- 用户基础信息 -->
    <div class="user-profile">
      <div class="box-center">
        <PanThumb :image="USER_PROFILE_AVATAR" width="105px" height="105px">
          <div class="hello">hello</div>
          {{userInfo.nickname}}
        </PanThumb>
      </div>
      <div class="box-center">
        <div class="role muted" style="color:#333">自律的程序员</div>
      </div>
      <div class="box-center wrapper">
        <div class="box-item flex">
          <el-icon style="font-size: 16px;margin-right: 8px"><el-icon-user /></el-icon>
          <span class="item-text">资深全栈bug开发</span>
        </div>
        <div class="box-item flex">
          <el-icon style="font-size: 16px;margin-right: 8px"><el-icon-office-building /></el-icon>
          <span class="item-text">前端开发部门 - 可视化事业群 - JS技术部</span>
        </div>
        <div class="box-item flex">
          <el-icon style="font-size: 16px;margin-right: 8px"><el-icon-location-information /></el-icon>
          <span class="item-text">中国 · 山东省 · 青岛市</span>
        </div>
        <div class="box-item flex">
          <el-icon style="font-size: 16px;margin-right: 8px"><el-icon-collection-tag /></el-icon>
          <span class="item-text">js、html、css、vue、react、node</span>
        </div>
      </div>
    </div>
    <!-- 个人技能 -->
    <div class="project-desc" style="margin-top:35px">
      <div class="project-section">
        <div class="project-section-header">
          <my-icon-technology style="width: 18px; height: 18px" />
          <span>个人技能</span>
        </div>
        <div class="project-section-body">
          <div class="muted">
            <el-tag
              v-for="tag in dynamicTags"
              :key="tag"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
              class="tag-item"
            >
              {{tag}}
            </el-tag>
            <el-input
              v-if="inputVisible"
              ref="inputRef"
              v-model="inputValue"
              size="small"
              @keyup.enter="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <el-button style="height:24px;line-height:24px'padding:0" size="small" v-else @click="showInput">
              添加
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 团队 -->
    <div class="project-desc">
      <div class="project-section">
        <div class="project-section-header">
          <my-icon-team style="width: 18px; height: 18px" />
          <span>团队</span>
        </div>
        <div class="project-section-body grid">
          <div v-for="item in teams" :key="item.icon" class="flex" style="height: 30px">
            <component :is="item.icon" style="width: 24px; height: 24px"/>
            <span>{{item.text}}</span>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import {ref, nextTick, defineAsyncComponent} from 'vue'
import {USER_PROFILE_AVATAR, dynamicTaglist, teams} from '../mock/center'
import useConfigStore from '@/store/config'
import useUserStore from '@/store/user'

const PanThumb = defineAsyncComponent(() => import('@/components/PanThumb'))

const {primaryColor} = useConfigStore()
const {userInfo} = useUserStore()

const inputRef = ref(null)
const inputValue = ref('')
const inputVisible = ref(false)
const dynamicTags = ref(dynamicTaglist)

/* 关闭单个tag */
function handleClose(tag) {
  const dynamicTagsVal =  dynamicTags.value
  dynamicTagsVal.splice(dynamicTagsVal.indexOf(tag), 1)
}
/* 显示为input输入框 */
async function showInput() {
  inputVisible.value = true
  await nextTick()
  inputRef.value.input.focus()
}
/* 回车确认事件 */
function handleInputConfirm() {
  const inputVal = inputValue.value
  if (inputVal) {
    dynamicTags.value.push(inputVal)
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

<style scoped lang="scss">
.user-container {
  .muted {
    font-size: $font-size-medium;
    color: #777;
    .tag-item {
      margin-right: 8px;
      margin-bottom: 8px;
    }
    .add-btn {
      border: none;
      outline: none;
      height: 24px;
      padding: 0 10px;
      line-height: 24px;
      background-color: $primary-color;
      @include borderRadius(2px);
      @include sc($font-size-medium, $color-text)
    }
  }
  .user-profile {
    text-align: center;
    .username {
      font-size: 20px;
      font-weight: bold;
      line-height: 28px;
    }
    .wrapper {
      margin: 24px 0;
      border-bottom: 1px dashed rgba(0,0,0,.06);
    }
    .box-center {
      padding-top: 10px;
      .box-item, .hello {
        margin-bottom: 12px;
      }
      .box-item {
        &:last-child {
          padding-bottom: 10px;
        }
      }
      .item-text {
        margin-left: 8px;
        font-size: $font-size-medium;
      }
    }
    .role {
      font-size: $font-size-large-x;
      font-weight: bold;
      padding-top: 10px;
    }
  }
  .project-desc {
    margin-top: 20px;
    color: #606266;
    span {
      padding-left: 4px;
    }
    .project-section {
      .project-section-header {
        @include fl();
        border-bottom: 1px solid #dfe6ec;
        padding-bottom: 10px;
        margin-bottom: 10px;
        font-weight: bold;
      }
      .project-section-body {
        .progress-item {
          margin-top: 10px;
          div {
            font-size: 16px;
            height: 30px;
            margin-bottom: 10px;
          }
        }
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 15px;
      }
    }
  }
}
</style>
